import React, { Component } from 'react'
import axios from 'axios';
import Header from './component/Header';
import Main from './component/Main';
import Footer from './component/Footer'

export class App extends Component {
  constructor(props){
    super(props)
    this.state={
      tablist:[],
      i:0
    }
  }
  componentDidMount(){
    axios.get('/list').then(res=>{
      this.setState({
        tablist:res.data
      })
    })
  }
  change=(index)=>{
    // console.log(tablist);
    this.setState({
      i:index
    })
  }
  render() {
    const {tablist,i}=this.state
    return (
      <div className='App'>
        <Header tablist={tablist} i={i} change={this.change}></Header>
        <Main list={tablist[i]?tablist[i].children:[]}></Main>
        <Footer></Footer>
      </div>
    )
  }
}

export default App
